<template>
  <el-card>
    <el-form
      :model="formData"
      ref="userFormRef"
      :rules="rules"
      label-position="right"
      label-width="auto"
    >
      <div style="margin: 15px; text-align: center">
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="headers"
        >
          <img
            v-if="formData.avatar"
            :src="formData.avatar"
            class="avatar"
            alt=""
          />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </div>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" disabled />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="formData.nickname" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" />
      </el-form-item>
      <el-form-item label="手机号码" prop="mobile">
        <el-input v-model="formData.mobile" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" type="password" clearable />
      </el-form-item>
      <el-form-item>
        <el-button :loading="loading" type="primary" @click="handleSubmit">{{
          buttonTxt
        }}</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import { modify } from "@/api/user";
import type { UploadProps } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
const props = defineProps({
  user: {
    type: Object,
    default: () => {
      return {
        id: undefined,
        username: "",
        email: "",
        nickname: "",
        password: "",
        mobile: "",
        avatar: "",
      };
    },
  },
});
const loading = ref(false);
const formData = ref(props.user);
const buttonTxt = ref("更新");
const userFormRef = ref(ElForm); // 用户表单
const uploadUrl = ref(import.meta.env.VITE_APP_API_URL + "/admin/user/upload");
const headers = ref({
  Authorization: localStorage.getItem("accessToken"),
});

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.value.avatar = response.data.url;
};
const rules = reactive({
  username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
  email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
  nickname: [{ required: true, message: "昵称不能为空", trigger: "blur" }],
  mobile: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
});

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  loading.value = true;
  buttonTxt.value = "提交中...";
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      modify(props.user)
        .then(() => {
          formData.value.password = "";
          buttonTxt.value = "更新";
          ElMessage.success("修改成功");
        })
        .finally(() => {
          loading.value = false;
          buttonTxt.value = "更新";
        });
    }
  });
}, 3000);

const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("Avatar picture must be JPG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};
onMounted(() => {
  formData.value.password = "";
});
</script>
<style>
.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 80px;
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  width: 80px;
  height: 80px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
